import Icon from "@ui/RJMart/icons";
import Carousel from "@ui/RJMart/carousel";
import qqWhite from "@assets/qq-white.png";
import SupplierInfoItem from "./SupplierInfoItem";
import HttpUtils from "@page/common/utils/HttpUtils";
import urlHook from "@page/common/utils/urlHook";
import CancelModal from "@page/common/modal/CancelModal/";
import Uts from "@module/Uts";

export default class StepThree extends React.Component {
    constructor(props) {
        super(props);

        let params=$state.params
        this.isGroupbuying=params.isGroupbuying-0
    }

    submitOrder = () => {
        const { setStep, orderId } = this.props;
        HttpUtils.submitApproval(orderId)
            .then(res => {
                console.log(res);
                setStep();
            })
            .catch(err => {
                console.log(err);
            });
    };

    goToOrderList = () => {
        const { setStep, orderId } = this.props;
        window.location.href = urlHook.onlineOrderList(orderId);
    };

    doCancel = () => {
        const { setStep, orderId } = this.props;
        HttpUtils.cancelApproval(orderId)
            .then(res => {
                console.log(res);

                $state.go({
                    stateName: "/cart"
                });
            })
            .catch(err => {
                console.log(err);
            });
    };

    render() {
        const { suppMsgs } = this.props;
        let orgId = Uts.getCookie("orgId");

        return (
            <div className={"order-result-content-warpper"}>
                <div className={"app-content-box"}>
                    <div
                        className={
                            suppMsgs.length >= 3
                                ? "order-result-content1"
                                : "order-result-content"
                        }
                    >
                        <div className="order-result-content-top">
                            <div className={"order-result-content-top-circle"}>
                                <Icon
                                    type={"check"}
                                    width={55}
                                    style={{ color: "#18BE6A" }}
                                />
                            </div>
                            {
                                this.isGroupbuying?
                                    <p className="zen_m-t-20">
                                        团购采购单提交成功，该采购单不能修改价格，请直接提交审批
                                    </p>
                                    :
                                    <p className="zen_m-t-20">
                                        采购申请单提交成功，您可以联系供应商进行价格调整，或直接提交审批
                                    </p>
                            }

                            {orgId == "18" && (
                                <div className="zen_646464 zen_m-t-20">
                                    注意事项：单个供应商的订单金额超过5万元的，需要登录学校OA系统申请审批
                                </div>
                            )}
                        </div>
                       
                        {this.renderCarousel()}
                        {this.renderItemList()}

                        <div className={"order-result-content-btns zen_m-b-30"}>
                            <div
                                onClick={this.submitOrder}
                                className={"order-result-content-btns1"}
                            >
                                <p>提交审批</p>
                            </div>
                            <div
                                onClick={this.goToOrderList}
                                className={"order-result-content-btns3"}
                            >
                                <p>查看采购单</p>
                            </div>
                            <CancelModal doCancel={this.doCancel} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    switchPrev = () => {
        this.carouselview.switchPrev();
    };

    switchNext = () => {
        this.carouselview.switchNext();
    };

    getSuppMsgsArr() {
        const { suppMsgs } = this.props;
        if (suppMsgs.length > 3) {
            let proportion = 3; //按照比例切割
            let num = 0;
            let _data = [];
            for (let i = 0; i < suppMsgs.length; i++) {
                if (i % proportion == 0 && i != 0) {
                    _data.push(suppMsgs.slice(num, i));
                    num = i;
                }
                if (i + 1 == suppMsgs.length) {
                    _data.push(suppMsgs.slice(num, i + 1));
                }
            }
            return _data;
        }
        return [];
    }

    renderCarousel() {
        const { suppMsgs } = this.props;
        const arr = this.getSuppMsgsArr();

        if (suppMsgs && suppMsgs.length > 3) {
            return (
                <div className={"order-result-carousel-wrapper"}>
                    <div onClick={this.switchPrev}>
                        <Icon
                            type={"left"}
                            className={"order-result-carousel-left-arrow"}
                        />
                    </div>

                    <Carousel
                        ref={v => (this.carouselview = v)}
                        dotShape="dot"
                        height="320"
                        style={{ width: 870 }}
                    >
                        {arr.map((item, index) => (
                            <div
                                key={index}
                                item={item}
                                className={"order-result-carousel-item"}
                            >
                                {this.renderCrousItem(item, index, arr)}
                            </div>
                        ))}
                    </Carousel>

                    <div onClick={this.switchNext}>
                        <Icon
                            type={"right"}
                            className={"order-result-carousel-right-arrow"}
                        />
                    </div>
                </div>
            );
        }
        return null;
    }

    renderCrousItem(item) {
        return (
            <div className={"order-result-carousel-item-sub"}>
                {item[0] && <SupplierInfoItem item={item[0]} />}
                {item[1] && <SupplierInfoItem item={item[1]} />}
                {item[2] && <SupplierInfoItem item={item[2]} />}
            </div>
        );
    }

    renderItemList() {
        const { suppMsgs } = this.props;
        if (suppMsgs && suppMsgs.length <= 3) {
            return (
                <div className={"order-result-itemlist"}>
                    {suppMsgs.map((item, index) => (
                        <SupplierInfoItem key={index} item={item} />
                    ))}
                </div>
            );
        }
        return null;
    }
}
